<template>
	<p>{{ $t('age') }}</p>
	<p>{{ mouse }}</p>
	<p style="position: fixed; width: 100px; height: 100px; background-color: pink; top: 0; right: 0">
		{{ scroll.x }}{{ scroll.y }}
	</p>
	<MyCount> toggleDark</MyCount>
	{{ num }}
	<button @click="handleClick">@click="toggleDark"</button>
	<my-name></my-name>
	<hello></hello>
	<vxe-table
		border
		ref="tableRef"
		:data="gridOptions.data"
		:checkbox-config="{ trigger: 'row' }"
		:column-config="{
			drag: true
		}"
		:columnDragConfig="{
			trigger: 'cell',
			showIcon: false
		}"
	>
		<vxe-column type="checkbox" width="60"></vxe-column>
		<vxe-column type="seq" width="150"></vxe-column>
		<vxe-column field="name" :title="$t('name')"></vxe-column>
		<vxe-column field="sex" :title="$t('sex')"></vxe-column>
		<vxe-column field="address" :title="$t('hello')"></vxe-column>
	</vxe-table>
	<router-view></router-view>
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</template>

<script lang="ts" setup>
import hello from './views/hello.vue'
const num = useCount(1, 2)
const mouse = useMouse()
const scroll = useWindowScroll()
const isDark = useDark({
	selector: 'body',
	attribute: 'color-scheme',
	valueDark: 'dark',
	valueLight: 'light'
})
const toggleDark = useToggle(isDark)
const title = useTitle('Hello')

function handleClick() {
	toggleDark(isDark.value)
}

watch(isDark, () => {
	title.value = isDark.value ? '🌙 Good evening!' : '☀️ Good morning!'
})

const gridOptions = reactive({
	data: [
		{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
		{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
		{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
		{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
	]
})
</script>
